<template>
  <!-- 投放区域 -->
  <div class="drop-area">
    <!--快速选择-->
    <div class="drop-area__quick">
      <label class="drop-area__quick-label">快速选择：</label>
      <div class="drop-area__quick-value">
        <el-checkbox-group
          :disabled="disabled"
          v-model="quickChecked"
        >
          <el-checkbox
            @change="changeQuickChecked(index + 1)"
            v-for="(city, index) in quickCities"
            :key="index"
            :label="city"
          ></el-checkbox>
        </el-checkbox-group>
      </div>
    </div>

    <!--选择地区、省市、城市-->
    <div
      class="drop-area__region"
      v-for="area in putAreaData"
      :key="area.area_id"
    >
      <!--地区-->
      <div class="drop-area__region-label">
        <el-checkbox
          :disabled="disabled"
          v-model="area.__checked"
          @change="changeChecked('area', {area})"
          :label="area.area_name"
        ></el-checkbox>
      </div>
      <div class="drop-area__region-value">
        <div
          class="drop-area__province"
          v-for="province in area.provinces"
          :key="province.province_id"
        >
          <!--省-->
          <div class="drop-area__province-label">
            <el-checkbox
              :disabled="disabled"
              v-model="province.__checked"
              :indeterminate="getCheckedItem(province.city) > 0 && getCheckedItem(province.city) < province.city.length"
              @change="changeChecked('province', {area, province})"
              :label="province.province_name"
            ></el-checkbox>
            <span
              v-show="getCheckedItem(province.city) > 0"
              class="drop-area__province-select"
            >{{getCheckedItem(province.city)}}/{{province.city.length}}</span>
          </div>
          <div class="drop-area__province-value">
            <div class="drop-area__city">
              <!--市-->
              <div
                class="drop-area__city-label"
                v-for="city in province.city"
                :key="city.city_id"
              >
                <el-checkbox
                  :disabled="disabled"
                  v-model="city.__checked"
                  @change="changeChecked('city', {area, province})"
                  :label="city.city_name"
                ></el-checkbox>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { uniq } from "lodash";

import putArea from "@/assets/js/area-option";

export default {
  name: "DropArea",
  props: ["area-code", "disabled", "area-quick", "area"],
  data() {
    return {
      // 投放区域数据
      putAreaData: [],
      // 快速选择
      quickCities: ["一线城市", "二线城市", "三线城市", "四线城市及以下"],
      quickChecked: []
    };
  },
  methods: {
    // 给数据添加__checked属性
    createPutAreaData(checked = []) {
      putArea.forEach(area => {
        area.__checked = checked.indexOf(area.area_id) !== -1;
        area.provinces.forEach(province => {
          province.__checked = checked.indexOf(province.province_id) !== -1;
          province.city.forEach(city => {
            city.__checked = checked.indexOf(city.city_id) !== -1;
          });
        });
      });
      return putArea;
    },

    // 选中切换
    changeChecked(type, { area, province }) {
      if (this.disabled) return false;
      switch (type) {
        case "area":
          area.provinces.forEach(province => {
            province.__checked = area.__checked;
            province.city.forEach(city => {
              city.__checked = area.__checked;
            });
          });
          break;

        case "province":
          province.city.forEach(city => {
            city.__checked = province.__checked;
          });
          area.__checked =
            area.provinces.length === this.getCheckedItem(area.provinces);
          break;

        case "city":
          province.__checked =
            province.city.length === this.getCheckedItem(province.city);
          break;
      }
    },

    // 获取当前省市的选中数量
    getCheckedItem(items) {
      return items.filter(item => {
        return item.__checked === true;
      }).length;
    },

    // 快速选择
    changeQuickChecked(level) {
      if (this.disabled) return false;
      // 选择城市
      this.putAreaData.forEach(area => {
        area.provinces.forEach(province => {
          province.city.forEach(city => {
            let quick = {
              1: "一线城市",
              2: "二线城市",
              3: "三线城市",
              4: "四线城市及以下"
            };
            if (city.city_level === level) {
              city.__checked = this.quickChecked.includes(quick[level]);
            }
          });
        });
      });
      // 选择完城市更新省份
      this.putAreaData.forEach(area => {
        area.provinces.forEach(province => {
          province.__checked =
            province.city.length === this.getCheckedItem(province.city);
        });
      });
      // 选择完省份更新区域
      this.putAreaData.forEach(area => {
        area.__checked =
          area.provinces.length === this.getCheckedItem(area.provinces);
      });
      this.$emit("update:areaQuick", this.quickChecked.join());
    },

    // 获取选中数据
    getCheckedData(data) {
      let ret = [];
      data.forEach(area => {
        if (area.__checked) {
          ret.push({
            key: area.area_id,
            value: area.area_name
          });
        }
        area.provinces.forEach(province => {
          if (province.__checked) {
            ret.push({
              key: province.province_id,
              value: province.province_name
            });
          }
          province.city.forEach(city => {
            if (city.__checked) {
              ret.push({
                key: city.city_id,
                value: city.city_name
              });
            }
          });
        });
      });
      return ret;
    },

    // 获取label、value
    getArea(data) {
      let ret = {
        key: [],
        value: []
      };
      let recursive = data => {
        data.forEach(item => {
          ret.key.push(item.key);
          ret.value.push(item.value);
          if (item.children && item.children.length) {
            recursive(item.children);
          }
        });
      };
      recursive(data);
      return {
        key: ret.key.join(),
        value: uniq(ret.value).join()
      };
    }
  },
  watch: {
    putAreaData: {
      deep: true,
      handler(data) {
        this.$emit(
          "update:area",
          this.getArea(this.getCheckedData(data)).value
        );
        this.$emit(
          "update:areaCode",
          this.getArea(this.getCheckedData(data)).key
        );
      }
    },
    areaQuick(v) {
      if (v) {
        this.quickChecked = v.split(",");
      }
    },
    areaCode(v) {
      if (v) {
        this.putAreaData = this.createPutAreaData(v.split(","));
      }
    }
  },
  created() {
    this.putAreaData = this.createPutAreaData();
  }
};
</script>

<style scoped lang="scss">
@import "~@/assets/scss/color";

.drop-area {
  min-width: 600px;
  background: $--background-major;
  color: $--text-major;

  &__quick {
    border-bottom: 1px solid $--border-major;
    padding-bottom: 10px;
    margin-bottom: 10px;
    &-label {
      float: left;
    }
  }

  &__local {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid $--border-major;
  }

  &__region,
  &__province,
  &__city {
    line-height: 32px;
    &-label {
      float: left;
      width: 150px;
    }
    &-value {
      float: left;
      width: 600px;
    }
    &::after {
      content: " ";
      display: block;
      height: 0;
      clear: both;
    }
  }

  &__region-label {
    width: 120px;
  }

  &__province,
  &__city {
    &-label {
      width: 140px;
      padding-left: 10px;
    }
  }

  &__province {
    width: 150px;
    float: left;
    position: relative;
    &-value {
      display: none;
      position: absolute;
      z-index: 10;
      top: 0;
      left: 100%;
      width: 300px;
      background: lighten($--text-high, 47%);
      box-shadow: 0 3px 3px lighten($--text-high, 40%),
        3px 0 3px lighten($--text-high, 40%);
    }
    &-select {
      position: absolute;
      top: 6px;
      right: 0;
      font-size: 12px;
      height: 20px;
      padding: 0 5px;
      line-height: 20px;
      background: $--text-high;
      color: $--background-high;
    }

    &:hover &-value {
      display: block;
    }
    &:hover &-select {
      display: none;
    }
    &:hover &-label {
      background: lighten($--text-high, 47%);
      &::after {
        position: absolute;
        content: " ";
        width: 100%;
        height: 3px;
        left: 0;
        bottom: 0;
        box-shadow: 0 3px 3px lighten($--text-high, 40%);
      }
    }
  }
}
</style>